<template>
    <div class="w">
         <div class="header">
           <div class="header-left">
              <p>
                  <img src="../../assets/images/logo_03.png">
              </p>
           </div>
           <div class="header-middle">
                <input type="text" placeholder="搜索科室/专家/病症" class="search-text">
                <button class="btn btn-success search-button">搜索</button>
           </div>
           <div class="header-phone">
               <span>热线：40088888</span>
           </div>
           <div class="header-right">
              <span>
                <a href=""  @click.prevent="switchChinese()">中文</a>
              </span>
              <span>|</span>
              <span>
                <a href="" @click.prevent="switchEnlish()">English</a>
              </span>
           </div>
        </div>
        <div class="navbar">
            <div class="nav">
              <div><router-link to="/" class="router-link" @click.native="goHome">{{$t('message.Home')}}</router-link></div>
              <div><router-link to="/AboutUs" class="router-link" @click.native="goAther">{{$t('message.AboutUs')}}</router-link></div>
              <div class="dropdown" @mouseover="show_service" @mouseleave="hide_service">
                  <router-link to="/MedicalService/technicalTeam" class="router-link" @click.native="goAther">
                    {{$t('message.MedicalService')}}
                  </router-link>
                  <div class="menu" v-if="Show_service">
                      <span @click="gotechnicalTeam">医疗团队</span>
                      <span @click="gocrossMedical">跨境医疗</span>
                      <span @click="gofamilyDoctor">家庭医生</span>
                      <span @click="gochronicManagement">慢病管理</span>
                      <span @click="gonedicalResearch">医学研究</span>
                  </div>
              </div>
              <div class="dropdown" @mouseover="show_depert" @mouseleave="hide_depert">
                  <router-link to="/departmentIntroduction" class="router-link" @click.native="goAther">
                    {{$t('message.DepartmentIntroduction')}}
                  </router-link>
                  <div class="menu" v-if="Show_depert">
                      <span>全科</span>
                      <span>妇科</span>
                      <span>儿科</span>
                      <span>肿瘤科</span>
                      <span>神经科</span>
                      <span>康复/理疗科</span>
                  </div>
              </div>
              <div class="dropdown" @mouseover="show_intr" @mouseleave="hide_intr">
                  <router-link to="/clinicDistribution" class="router-link" @click.native="goAther">
                    {{$t('message.ClinicDistribution')}}
                  </router-link>
                  <div class="menu" v-if="Show_intr">
                      <span>深圳长木医疗诊所</span>
                      <span>湛江长木医疗诊所</span>
                  </div>
              </div>
              <div><router-link to="/healthInformation" class="router-link" @click.native="goAther">{{$t('message.HealthInformation')}}</router-link></div>
              <div><router-link to="/membershipService" class="router-link" @click.native="goAther">{{$t('message.MembershipService')}}</router-link></div>
              <div class="login" v-if="login">
                 <span><router-link to="/register" class="router-link">{{$t('message.Register')}}</router-link></span>
                 <span>|</span>
                 <span><router-link to="/login" class="router-link">{{$t('message.Login')}}</router-link></span>
              </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
   methods: {
    switchChinese(){
      this.$i18n.locale = 'cn'; 
    },
    switchEnlish(){
      this.$i18n.locale = 'en';
    },
    show_intr(){
      this.Show_intr=true;
    },
    hide_intr(){
      this.Show_intr=false;
    },
    show_service(){
      this.Show_service=true;
    },
    hide_service(){
      this.Show_service=false;
    },
    show_depert(){
      this.Show_depert=true;
    },
    hide_depert(){
      this.Show_depert=false;
    },
    goHome(){
     this.login=this.$store.getters.home;
    },
    goAther(){
     this.login=this.$store.commit('setLogin');
    },
    gomedicalService(){
      this.login=this.$store.commit('setLogin');
    },
    gotechnicalTeam(){
      this.$router.push({
        name:'technicalTeam'
      });
      this.login=this.$store.commit('setLogin');
    },
    gocrossMedical(){
      this.$router.push({
        name:'crossMedical'
      });
      this.login=this.$store.commit('setLogin');
    },

    gofamilyDoctor(){
      this.$router.push({
        name:'familyDoctor'
      });
      this.login=this.$store.commit('setLogin');
    },

    gochronicManagement(){
      this.$router.push({
        name:'chronicManagement'
      });
      this.login=this.$store.commit('setLogin');
    },

    gonedicalResearch(){
      this.$router.push({
        name:'nedicalResearch'
      });
      this.login=this.$store.commit('setLogin');
    },

   },
   data(){
     return {
      Show_intr:false,
      Show_service:false,
      Show_depert:false,
      login:true,
      foot:true
     }
   },
}
</script>

<style scoped>
.header{
    width:1200px;
    margin:0 auto;
    display:flex;
    justify-content: space-between;
    height:90px;
    line-height: 90px;
    position:relative;
}
.header-middle{
    position:relative;
    left:120px;
    line-height: 40px;
    top:24px;
}
.search-button{
    font-size:16px;
}
.header-right{
    position:relative;
    left:-48px;
}
.header-right span,.header-right a{
    margin:0 5px;
    color:#666666;
}
.header-phone{
    position:relative;
    left:72px;
    font-size:14px;
}
.header-phone span{
    color: #000;
    font-size:14px;
}
a,span{
    color:#fff;
    text-decoration: none;
}
br{
    display:block;
}
.navbar{
    background: #3aa5c5;
    height:60px;
}
.dropdown{
    position: relative;
}
.menu{
  height:100px;
  width:150px;
  position:absolute;
  top:60px;
  left:-46px;
  z-index: 999;
  text-align: center;
}
.menu span{
  display:block;
  width:150px;
  height:50px;
  background:#f7f8fa;
  line-height: 50px;
  color:#3aa5c5;
  cursor: pointer;
}
.menu span:hover{
    background:#3aa5c5;
    color:#fff;
}
.menu .router-link{
  color:#3aa5c5;
}
.nav{
    width:1220px;
    height:60px;;
    margin:0 auto;
    line-height: 60px;
    display:flex;
    justify-content: space-around;
}
.nav .login span{
    display:inline-block;
    margin:0 3px 0 0;
}
.search-text{
    height:40px;
    width:350px;
    position:relative;
    padding-left:10px;
}
.search-button{
    display:inline-block;
    height:40px;
    width:60px;
    font-size:16px;
    color:#fff;
    background:#50bb9e;
    position:absolute;
    right:-60px;
    top:0;
}
</style>
